.#{$ns}Timeline {
  min-height: #{px2rem(10px)};
}

.#{$ns}Timeline-vertical {
  display: flex;
  flex-flow: column;

  .#{$ns}TimelineItem {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex: 1;
    flex-direction: row;

    &-axle {
      flex: var(--TimelineItem--axle-flex);
      position: relative;

      &.#{$ns}TimelineItem-point-align {
        &--center {
          .#{$ns}TimelineItem-round-wrapper {
            transform: translate(-50%, -50%);
            top: 50%;
          }
          .#{$ns}TimelineItem-icon {
            transform: translate(-50%, -50%);
            top: 50%;
          }
        }
        &--bottom {
          .#{$ns}TimelineItem-icon {
            transform: translate(-50%, -50%);
            top: calc(100% - var(--sizes-base-18));
          }
          .#{$ns}TimelineItem-round-wrapper {
            transform: translate(-50%, -50%);
            top: calc(100% - var(--sizes-base-18));
          }
        }
      }

      .#{$ns}TimelineItem-line {
        width: var(--TimelineItem--left-line-width);
        background-color: var(--TimelineItem--line-bg);
        height: 100%;
        position: absolute;
        left: calc(50% - 1px);
        transform: translateX(0.5px);
        &-icon {
          left: var(--TimelineItem--icon-left-line-left);
        }
      }

      .#{$ns}TimelineItem-icon {
        position: absolute;
        width: var(--TimelineItem--icon-width);
        height: var(--TimelineItem--icon-height);
        left: var(--TimelineItem--icon-left);
        border-radius: var(--TimelineItem--icon-radius);
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .#{$ns}TimelineItem-round-wrapper {
        position: absolute;
        height: var(--sizes-base-18);
        display: flex;
        justify-content: center;
        align-items: center;
        left: 50%;
        transform: translateX(-50%);
      }
      .#{$ns}TimelineItem-icon {
        height: var(--sizes-base-18);
      }
    }

    &-content {
      padding-bottom: var(--TimelineItem--content-padding-bottom);
      margin-left: var(--TimelineItem--content-margin-left);
      margin-right: var(--TimelineItem--content-margin-left);

      .#{$ns}TimelineItem-time {
        color: var(--TimelineItem--text-primary-color);
        font-size: var(--Timeline-time-fontSize);
        font-weight: var(--Timeline-time-fontWeight);
        margin-bottom: var(--TimelineItem--content-time-margin-bottom);
      }

      .#{$ns}TimelineItem-title {
        display: flex;
        word-break: break-word;
        color: var(--TimelineItem--text-primary-color);
        font-size: var(--Timeline-title-fontSize);
        font-weight: var(--Timeline-title-fontWeight);
        margin-bottom: var(--TimelineItem--content-title-margin-bottom);
        .#{$ns}PlainField {
          padding-right: var(--TimelineItem-custem-time-padding-right);
        }
        .#{$ns}Button {
          margin-left: var(--TimelineItem-custem-button-margin-left);
        }
      }

      .#{$ns}TimelineItem-detail {
        .#{$ns}TimelineItem-detail-button {
          display: flex;
          cursor: pointer;
          align-items: center;
          font-size: var(--Timeline-detail-label-fontSize);
          color: var(--TimelineItem--detail-button-color);
          font-weight: var(--Timeline-detail-label-fontWeight);
          margin-bottom: var(--TimelineItem--detail-button-margin-bottom);
        }
        .#{$ns}TimelineItem-detail-arrow {
          color: var(--Timeline-detail-icon-color);
          width: var(--TimelineItem-detail-arrow-width);
          height: var(--TimelineItem-detail-arrow-width);
          transition: transform var(--animation-duration);
        }

        .#{$ns}TimelineItem-detail-arrow-top {
          transform: rotate(180deg);
        }

        .#{$ns}TimelineItem-detail-visible {
          display: block;
          word-break: break-word;
          border-radius: var(--Timeline-visible-border-radius);
          font-size: var(--Timeline-detail-content-fontSize);
          font-weight: var(--Timeline-detail-content-fontWeight);
          color: var(--Timeline-detail-content-color);
          padding: var(--TimelineItem-detail-visible-padding);
          box-shadow: var(--TimelineItem-detail-visible-shadow);
        }

        .#{$ns}TimelineItem-detail-invisible {
          display: none;
        }
      }
    }
  }

  &.#{$ns}Timeline-left {
    .#{$ns}TimelineItem {
      flex-direction: row-reverse;
      .#{$ns}TimelineItem-title {
        text-align: right;
      }
      .#{$ns}TimelineItem-content,
      .#{$ns}TimelineItem-detail {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
      }
    }
  }

  &.#{$ns}Timeline-alternate {
    .#{$ns}TimelineItem:nth-child(odd) {
      flex-direction: row-reverse;
      max-width: 50%;
      .#{$ns}TimelineItem-title {
        text-align: right;
      }
      .#{$ns}TimelineItem-content,
      .#{$ns}TimelineItem-detail {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
      }
    }

    .#{$ns}TimelineItem:nth-child(even) {
      margin-left: calc(50% - var(--Timeline-alternate-margin-left));
      max-width: calc(50% + var(--Timeline-alternate-margin-left));
    }
  }

  .#{$ns}TimelineItem:first-child {
    .#{$ns}TimelineItem-size-sm {
      .#{$ns}TimelineItem-line {
        top: 20px;
      }
    }
    .#{$ns}TimelineItem-size-md {
      .#{$ns}TimelineItem-line {
        top: 20px;
      }
    }
    .#{$ns}TimelineItem-size-lg {
      .#{$ns}TimelineItem-line {
        top: 20px;
      }
    }
    .#{$ns}TimelineItem-size-xl {
      .#{$ns}TimelineItem-line {
        top: 20px;
      }
    }
  }
}

.#{$ns}Timeline-horizontal {
  display: flex;
  flex-flow: column;
  .#{$ns}TimelineItem {
    display: flex;
    width: -webkit-fill-available;
    flex-flow: column;

    &-axle {
      // display: flex;
      // flex-direction: row-reverse;
      // justify-content: space-evenly;
      // align-items: center;
      position: relative;

      &.#{$ns}TimelineItem-point-align {
        &--left {
          .#{$ns}TimelineItem-round-wrapper,
          .#{$ns}TimelineItem-icon {
            left: 0%;
          }
        }
        &--right {
          .#{$ns}TimelineItem-round-wrapper,
          .#{$ns}TimelineItem-icon {
            right: 0;
          }
        }
        &--center {
          .#{$ns}TimelineItem-round-wrapper,
          .#{$ns}TimelineItem-icon {
            left: 50%;
          }
        }
      }

      .#{$ns}TimelineItem-round-wrapper {
        width: fit-content;
        position: absolute;
        transform: translateY(-50%);
      }
      .#{$ns}TimelineItem-line {
        flex: 1;
        height: var(--TimelineItem--left-line-width);
        background-color: var(--TimelineItem--line-bg);
      }

      .#{$ns}TimelineItem-icon {
        position: absolute;
        transform: translateY(-50%);
        border-radius: var(--TimelineItem--icon-radius);
      }
    }
    &-content {
      margin-top: var(--Timeline-horizontal-content-margin-top);
      padding-bottom: var(--TimelineItem--content-padding-bottom);
      margin-left: var(--TimelineItem--content-margin-left);

      &.#{$ns}TimelineItem-content-align {
        &--left {
          .#{$ns} {
            &TimelineItem-time,
            &TimelineItem-title {
              text-align: left;
            }
            &TimelineItem-detail {
              align-items: flex-start;
            }
          }
        }
        &--right {
          .#{$ns} {
            &TimelineItem-time,
            &TimelineItem-title {
              text-align: right;
            }
            &TimelineItem-detail {
              align-items: flex-end;
            }
          }
        }
      }

      .#{$ns}TimelineItem-time {
        text-align: center;
        color: var(--TimelineItem--text-primary-color);
        font-size: var(--Timeline-time-fontSize);
        font-weight: var(--Timeline-time-fontWeight);
        margin-bottom: var(--TimelineItem--content-time-margin-bottom);
      }

      .#{$ns}TimelineItem-title {
        color: var(--TimelineItem--text-primary-color);
        font-size: var(--Timeline-title-fontSize);
        font-weight: var(--Timeline-title-fontWeight);
        margin-bottom: var(--TimelineItem--content-title-margin-bottom);
        margin-left: 1%;
        margin-right: 1%;
        text-align: center;
      }

      .#{$ns}TimelineItem-detail {
        margin-left: 1%;
        margin-right: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .#{$ns}TimelineItem-detail-button {
          display: flex;
          cursor: pointer;
          align-items: center;
          font-size: var(--Timeline-detail-label-fontSize);
          color: var(--TimelineItem--detail-button-color);
          font-weight: var(--Timeline-detail-label-fontWeight);
          margin-bottom: var(--TimelineItem--detail-button-margin-bottom);
        }

        .#{$ns}TimelineItem-detail-arrow {
          color: var(--Timeline-detail-icon-color);
          width: var(--TimelineItem-detail-arrow-width);
          height: var(--TimelineItem-detail-arrow-width);
        }

        .#{$ns}TimelineItem-detail-arrow-top {
          transform: rotateX(180deg);
        }

        .#{$ns}TimelineItem-detail-visible {
          color: var(--colors-neutral-line-4);
        }

        .#{$ns}TimelineItem-detail-invisible {
          display: none;
        }
      }
    }
  }

  .#{$ns}Timeline- {
    &first-line,
    &second-line {
      display: flex;
      > * {
        flex: 1;
      }
    }
  }

  .#{$ns} {
    &TimelineItem-round-wrapper {
      position: absolute;
      transform: translateY(-0.5px);
    }
  }
}

.#{$ns}TimelineItem,
.#{$ns}Timeline-line {
  .#{$ns}TimelineItem- {
    &size-xl {
      .#{$ns}TimelineItem-round {
        height: calc(
          var(--TimelineItem-round-width-xl) * 2 +
            var(--TimelineItem-round-width-lg) * 2
        );
        width: calc(
          var(--TimelineItem-round-width-xl) * 2 +
            var(--TimelineItem-round-width-lg) * 2
        );
        font-size: calc(
          var(--TimelineItem-round-width-xl) * 2 +
            var(--TimelineItem-round-width-lg) * 2
        );
      }
      .#{$ns}TimelineItem-icon {
        font-size: calc(
          var(--TimelineItem-round-width-xl) * 2 +
            var(--TimelineItem-round-width-lg) * 2
        );
      }
      .#{$ns}TimelineItem-dot {
        height: calc(var(--TimelineItem-round-width-xl) * 2);
        width: calc(var(--TimelineItem-round-width-xl) * 2);
      }
    }
    &size-lg {
      .#{$ns}TimelineItem-round {
        height: calc(
          var(--TimelineItem-round-width-lg) * 2 +
            var(--TimelineItem-round-width-xl)
        );
        width: calc(
          var(--TimelineItem-round-width-lg) * 2 +
            var(--TimelineItem-round-width-xl)
        );
        font-size: calc(
          var(--TimelineItem-round-width-lg) * 2 +
            var(--TimelineItem-round-width-xl)
        );
      }
      .#{$ns}TimelineItem-icon {
        font-size: calc(
          var(--TimelineItem-round-width-lg) * 2 +
            var(--TimelineItem-round-width-xl)
        );
      }
      .#{$ns}TimelineItem-dot {
        height: calc(var(--TimelineItem-round-width-lg) * 2);
        width: calc(var(--TimelineItem-round-width-lg) * 2);
      }
    }
    &size-md {
      .#{$ns}TimelineItem-round {
        height: calc(
          var(--TimelineItem-round-width-md) * 2 +
            var(--TimelineItem-round-width-lg)
        );
        width: calc(
          var(--TimelineItem-round-width-md) * 2 +
            var(--TimelineItem-round-width-lg)
        );
        font-size: calc(
          var(--TimelineItem-round-width-md) * 2 +
            var(--TimelineItem-round-width-lg)
        );
      }
      .#{$ns}TimelineItem-icon {
        font-size: calc(
          var(--TimelineItem-round-width-md) * 2 +
            var(--TimelineItem-round-width-lg)
        );
      }
      .#{$ns}TimelineItem-dot {
        height: calc(var(--TimelineItem-round-width-md) * 2);
        width: calc(var(--TimelineItem-round-width-md) * 2);
      }
    }
    &size-sm {
      .#{$ns}TimelineItem-round {
        height: calc(
          var(--TimelineItem-round-width-sm) * 2 +
            var(--TimelineItem-round-width-sm)
        );
        width: calc(
          var(--TimelineItem-round-width-sm) * 2 +
            var(--TimelineItem-round-width-sm)
        );
        font-size: calc(
          var(--TimelineItem-round-width-sm) * 2 +
            var(--TimelineItem-round-width-sm)
        );
      }
      .#{$ns}TimelineItem-icon {
        font-size: calc(
          var(--TimelineItem-round-width-sm) * 2 +
            var(--TimelineItem-round-width-sm)
        );
      }
      .#{$ns}TimelineItem-dot {
        height: calc(var(--TimelineItem-round-width-sm) * 2);
        width: calc(var(--TimelineItem-round-width-sm) * 2);
      }
    }
    &round {
      background: var(--colors-neutral-fill-1);
      position: relative;
      opacity: 0.2;
      border-radius: var(--TimelineItem--round-radius);
    }
    &dot {
      position: absolute;
      background-color: var(--colors-neutral-fill-1);
      border-radius: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    &round {
      border-radius: var(--TimelineItem--round-radius);

      &--danger.#{$ns}TimelineItem-dot {
        background: var(--Timeline--danger-dot-color);
      }

      &--info.#{$ns}TimelineItem-dot {
        background: var(--Timeline--info-dot-color);
      }

      &--success.#{$ns}TimelineItem-dot {
        background: var(--Timeline--success-dot-color);
      }

      &--warning.#{$ns}TimelineItem-dot {
        background: var(--Timeline--warning-dot-color);
      }

      &.#{$ns}TimelineItem-round-background--warning {
        background: var(--Timeline--warning-dot-bg-color);
      }
      &.#{$ns}TimelineItem-round-background--success {
        background: var(--Timeline--success-dot-bg-color);
      }
      &.#{$ns}TimelineItem-round-background--info {
        background: var(--Timeline--info-dot-bg-color);
      }
      &.#{$ns}TimelineItem-round-background--danger {
        background: var(--Timeline--danger-dot-bg-color);
      }
    }
  }
}

.#{$ns}Timeline-line {
  display: flex;
  .#{$ns}TimelineItem-axle {
    flex: 1;
  }
}

.#{$ns}TimelineItem-hide-dot {
  position: relative;
  .#{$ns}TimelineItem-round {
    position: absolute;
    border-radius: 0;
  }
}

.#{$ns}TimelineItem .#{$ns}TimelineItem-hide-dot,
.#{$ns}TimelineItem-axle.#{$ns}TimelineItem-hide-dot {
  .#{$ns}TimelineItem-round-wrapper {
    display: none;
  }
  .#{$ns}TimelineItem-icon {
    display: none;
  }
}

.#{$ns}Timeline {
  &-first-line {
    .#{$ns}TimelineItem-content {
      margin-top: auto;
    }
  }
  &-second-line {
    .#{$ns}Timeline-inner-content-wrapper {
      margin-top: var(--sizes-base-12);
    }
    .#{$ns}TimelineItem-content {
      margin-top: var(--TimelineItem--content-padding-bottom);
    }
  }
}

.#{$ns}TimelineItem-icon {
  display: flex;
  svg.icon {
    top: 0;
  }
}

.#{$ns} {
  &TimelineItem-round-wrapper {
    z-index: 1;
  }
}
